@use "../../colors";

$base-bg: colors.$ui-white;

#view {
    background-color: colors.$ui-white;
    padding: 0;
}

.starter-projects-page{
    .page-header {
        margin-bottom: 3rem;
        padding: 2rem 0;
        background-color: colors.$ui-magenta-dark;
        text-align: center;
        color: colors.$ui-white;
    }

    .think-big,
    .how-to {
        margin: 0 auto 3rem auto;
    }

    .think-big {
        display: flex;
        align-items: center;
        gap: 2.5rem;

        .whats-scratch-videos {
            border: unset;
            border-radius: unset;
            overflow: unset;

            height: 198px;

            iframe {
                height: 198px;
                width: 352px;
            }
        }
    }

    .paragraph {
        h3 {
            font-size: 1.5rem;
        }

        p {
            margin: 0;
        }
    }

    .project-sections {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2.5rem;
        padding-top: 1rem;
    }

    .surprise {
        display: flex;
        justify-content: center;
        padding: 4rem 0;

        .surprise-button {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem 1.5rem;

            background-color: colors.$ui-magenta-dark;
            border-radius: 50px;

            font-size: 1.5rem;

            img {
                height: 2.5rem;
            }
        }
    }

    .getting-started {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4rem;
        padding: 4rem 0;
        background-color: colors.$ui-gray;

        img {
            height: 13.5rem;
        }

        .info {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: start;

            .tips-button {
                font-size: 1rem;
                padding: 0.75rem 1.5rem;
            }
        }
    }

    @media only screen and (min-width: 1280px) {
        .think-big,
        .how-to,
        .project-sections .project-section {
            width: 65rem;
        }
    }

    @media only screen and (max-width: 1280px) {
        .think-big,
        .how-to,
        .project-sections .project-section {
            width: 64rem;
        }
    }

    @media only screen and (max-width: 1024px) {
        .think-big,
        .how-to,
        .project-sections .project-section {
            width: 52.5rem;
        }
    }

    @media only screen and (max-width: 960px) {
        .think-big,
        .how-to,
        .project-sections .project-section {
            width: 48rem;
        }

        .paragraph {
            text-align: left;
        }
    }

    @media only screen and (max-width: 768px) {
        .think-big,
        .how-to,
        .project-sections .project-section {
            max-width: 35rem;
        }

        .think-big {
            flex-direction: column;
        }

        .paragraph {
            text-align: center;
        }

        .getting-started {
            flex-direction: column;
            gap: 2.5rem;
            padding: 2.5rem 0;

            .info {
                align-items: center;

                .tips-button {
                    font-size: 1rem;
                    padding: 0.75rem 1.5rem;
                }
            }
        }
    }

    @media only screen and (max-width: 560px) {
        .page-header {
            font-size: 1.5rem;
            padding: 1.5rem 0;
        }

        .paragraph {
            h3 {
                font-size: 1.25rem;
            }

            p {
                font-size: 0.875rem
            }
        }

        .think-big,
        .how-to,
        .project-sections .project-section {
            max-width: 22.5rem;
        }

        .getting-started .info {
            h2 {
                font-size: 1.5rem;
            }

            p {
                font-size: 0.875rem;
            }
        }
    }

    @media only screen and (max-width: 360px) {
        .think-big,
        .how-to,
        .project-sections .project-section {
            max-width: 18.75rem;
        }

        .think-big .whats-scratch-videos {
            height: 168.75px;

            iframe {
                height: 168.75px;
                width: 300px;
            }
        }

        .getting-started {
            img {
                height: 10.5rem;
            }
        }
    }
}
